<template>
  <el-container class="panel-block">
    <el-header class="sa-header">
      <el-tabs class="sa-tabs" v-model="configType">
        <el-tab-pane v-for="c in configList" :key="c" :label="c.label" :name="c.api"></el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main class="sa-p-t-30">
      <el-row :gutter="16">
        <el-col :xs="24" :sm="20" :md="18" :lg="14" :xl="14">
          <template v-if="configType == 'wechat.admin.config.officialaccount'">
            <div class="tip"
              >配置说明：<a href="https://kf.qq.com/faq/170104AJ3y26170104Yj673y.html" target="_blank"
                >公众平台接口权限列表说明</a
              ></div
            >
            <el-form
              :model="state.officialAccount.model"
              :rules="state.officialAccount.rules"
              ref="officialAccountRef"
              label-width="180px"
            >
              <el-form-item label="公众号名称" prop="name">
                <el-input
                  placeholder="请输入公众号名称"
                  v-model="state.officialAccount.model.name"
                ></el-input>
              </el-form-item>
              <el-form-item label="公众号类型">
                <el-radio-group v-model="state.officialAccount.model.type">
                  <el-radio :label="1">订阅号</el-radio>
                  <el-radio :label="2">认证订阅号</el-radio>
                  <el-radio :label="3">服务号</el-radio>
                  <el-radio :label="4">认证服务号</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="公众号Logo" prop="logo">
                <sa-uploader
                  v-model="state.officialAccount.model.logo"
                  fileType="image"
                ></sa-uploader>
              </el-form-item>
              <el-form-item label="公众号二维码" prop="qrcode">
                <sa-uploader
                  v-model="state.officialAccount.model.qrcode"
                  fileType="image"
                ></sa-uploader>
              </el-form-item>
              <el-form-item label="开发者AppId" prop="app_id">
                <el-input
                  placeholder="请输入开发者AppId"
                  v-model="state.officialAccount.model.app_id"
                ></el-input>
              </el-form-item>
              <el-form-item label="开发者AppSecret" prop="secret">
                <el-input
                  placeholder="请输入开发者AppSecret"
                  v-model="state.officialAccount.model.secret"
                ></el-input>
              </el-form-item>
              <el-form-item label="服务器地址">
                <el-input v-model="state.officialAccount.model.server_url" disabled>
                  <template #append>
                    <span
                      @click="useClip(state.officialAccount.model.server_url)"
                      class="cursor-pointer"
                      >复制</span
                    >
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="令牌(Token)" prop="token">
                <el-input
                  placeholder="请输入令牌(Token)"
                  v-model="state.officialAccount.model.token"
                ></el-input>
              </el-form-item>
              <el-form-item label="消息加解密密钥" prop="aes_key">
                <el-input
                  placeholder="请输入消息加解密密钥"
                  v-model="state.officialAccount.model.aes_key"
                ></el-input>
              </el-form-item>
              <el-form-item label="服务器配置状态">
                <div
                  class="sa-dot-wrap"
                  :class="state.officialAccount.model.status == 0 ? 'sa-dot-info' : 'sa-dot-normal'"
                >
                  <div class="sa-dot"></div>
                  <span>
                    {{ state.officialAccount.model.status == 0 ? '未接入' : '已接入' }}
                  </span>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-col>
      </el-row>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button @click="getData">重置</el-button>
      <el-button type="primary" @click="confirm">保存</el-button>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'wechat.admin.config',
  };
</script>

<script setup>
  import { reactive, ref, onMounted, computed, getCurrentInstance } from 'vue';
  import api from '@/app/wechat/api';
  import useClip from '@/sheep/utils/clipboard.js';
  import { checkAuth } from '@/sheep/directives/auth';

  const { proxy } = getCurrentInstance();

  const configList = computed(() => {
    const config = [{ label: '公众号配置', api: 'wechat.admin.config.officialaccount' }];
    return config.filter((c) => {
      if (checkAuth(c.api)) return c;
    });
  });
  const configType = ref(configList.value.length > 0 ? configList.value[0].api : '');

  // 表单数据
  const state = reactive({
    officialAccount: {
      model: {},
      rules: {
        name: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
        logo: [{ required: true, message: '请上传公众号Logo', trigger: 'blur' }],
        qrcode: [{ required: true, message: '请上传公众号二维码', trigger: 'blur' }],
        app_id: [{ required: true, message: '请输入开发者AppId', trigger: 'blur' }],
        secret: [{ required: true, message: '请输入开发者AppSecret', trigger: 'blur' }],
        token: [{ required: true, message: '请输入令牌(Token)', trigger: 'blur' }],
        aes_key: [{ required: true, message: '请输入消息加解密密钥', trigger: 'blur' }],
      },
    },
  });

  // 获取配置信息
  async function getData() {
    const { data } = await api.admin.config.officialAccount();
    state.officialAccount.model = data;
  }

  // 提交保存
  function confirm() {
    const form = proxy.$refs['officialAccountRef'];
    form.validate((valid) => {
      valid && api.admin.config.officialAccount(state.officialAccount.model);
    });
  }

  onMounted(() => {
    if (configList.value.length > 0) {
      getData();
    }
  });
</script>
<style lang="scss">
  .tip {
    line-height: 20px;
    font-size: 12px;
    font-weight: 400;
    color: var(--sa-subfont);
    margin-left: 100px;
    margin-bottom: 20px;
    a {
      color: var(--sa-subfont);
      text-decoration: underline;
    }
  }
  @media screen and (max-width: 992px){
    .tip{
      margin-left: 0px;
    }
  }
</style>
